<template>
  <div class="flipper" @click="flip">
    <transition name="flip">
      <div class="face" v-show="showFace">
        <slot name="face"/>
      </div>
    </transition>

    <transition name="flip">
      <div class="back" v-show="!showFace">
        <slot name="back"/>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
  .flipper {
    display: inline-block;
    cursor: pointer;

    .flip-enter-active {
      animation: flip-in 0.2s linear;
    }

    .flip-leave-active {
      display: none;
      animation: flip-out 0.2s linear;
    }

    @keyframes flip-in {
      0% {
        transform: rotateY(-180deg);
      }

      100% {
        transform: rotateY(0);
      }
    }

    @keyframes flip-out {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(180deg);
      }
    }
  }
</style>

<script>
export default {
  data() {
    return {
      showFace: true
    }
  },

  methods: {
    flip() {
      this.showFace = !this.showFace;
    }
  }
}
</script>
